<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>交互式移动模型数据</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        var model;
        // 视图模型
        var viewModel;
        //定义鼠标事件管理对象
        var mouseEventManager;

        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');

            //构造第三方图层对象
            var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            var osm = thirdPartyLayer.appendOsmMap();

            //开启动画：如果模型自带动画，需开启此参数
            webGlobe.viewer.clock.shouldAnimate = true;
            //开启地形深度检测
            webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;

            //构造通用数据管理对象
            var commonDataManager = new CesiumZondy.Manager.CommonDataManager({
                viewer: webGlobe.viewer
            });
            //添加模型（gltf文件）
            model = commonDataManager.appendModel(
                //模型id
                'model',
                //模型url路径
                './static/data/model/donghua.gltf',
                //模型经度、纬度、高度
                118.0385, 42.6374, -5,
                //缩放比
                50
            );

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            sceneManager.flyToEx(118.04150811201862, 42.63625979889753, {
                height: 80,
                heading: -63,
                pitch: -6,
                roll: 0
            });

            //移动模型
            movelModel();
        }

        /*移动模型*/
        function movelModel() {
            //构造鼠标事件管理对象
            mouseEventManager = new CesiumZondy.Manager.MouseEventManager({
                viewer: webGlobe.viewer
            });
            if (viewModel) {
                if (Cesium.defined(viewModel)) {
                    viewModel.deactivate();
                }
            }

            function rightClick(movement) {
                if (viewModel) {
                    if (Cesium.defined(viewModel)) {
                        viewModel.deactivate();
                    }
                }
                mouseEventManager.unRegisterMouseEvent('RIGHT_CLICK');
            }

            function leftClick(movement) {
                //选择模型
                var res = webGlobe.scene.pick(movement.position);
                if (Cesium.defined(res) && Cesium.defined(res.primitive)) {
                    model = res.primitive;
                    if (!Cesium.defined(model)) {
                        return;
                    }
                    updateEditor(model);
                    viewModel.activate();
                    mouseEventManager.registerMouseEvent('RIGHT_CLICK', rightClick);
                }
            }
            //注册鼠标左键单击事件
            mouseEventManager.registerMouseEvent('LEFT_CLICK', leftClick);
        }

        function updateEditor(model) {
            var transformEditor;
            if (!Cesium.defined(transformEditor)) {
                //创建平移编辑器
                transformEditor = new Cesium.TransformEditor({
                    container: webGlobe.viewer.container,
                    scene: webGlobe.viewer.scene,
                    transform: model.modelMatrix,
                    boundingSphere: model.boundingSphere
                });
                //获取模型视图对象
                viewModel = transformEditor.viewModel;
            } else {
                transformEditor.transform = model.modelMatrix;
                transformEditor.boundingSphere = model.boundingSphere;
            }
            //设置模型视图平移
            viewModel.setModeTranslation();
            //激活平移工具
            viewModel.activate();
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'>
        <div class="message">
            <label>第一步：鼠标左键点击拾取模型，会显示XYZ三条轴线；<br />第二步：延轴线方向拖动即可修改对应方向位置。</label>
        </div>
    </div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>